<template>
  <div
    ref="searchMain"
    class="relative h-[170px] max-h-[250px] shrink-0 px-[10px] pt-[10px] duration-300"
    :class="[isExpend ? 'overflow-y-auto' : 'overflow-hidden']"
  >
    <div ref="contentMain">
      <div v-for="(item, index) in myFileLists" :key="index" class="flex">
        <div class="h-[30px] w-[150px] bg-slate-50 text-center leading-[30px]">{{ item.title }}:</div>
        <div class="flex flex-1 flex-wrap">
          <div v-for="(itemData, index) in item.data" :key="index">
            <div class="mb-[10px] flex h-[30px] w-[150px] cursor-pointer justify-center text-center leading-[30px]">
              <div class="px-[5px]" :class="[itemData.active ? 'isActive' : '']" @click="searchItem(item, itemData)">
                {{ itemData.label }}
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="z-1000 absolute bottom-[10px] right-[10px] cursor-pointer bg-slate-50 px-[10px]" @click="expend">
        <div v-if="isHeight">
          {{ isExpend ? "收起" : "展开" }}
          <i :class="[isExpend ? 'el-icon-arrow-up' : 'el-icon-arrow-down']"></i>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
const { clone } = require("xe-utils");
export default {
  name: "FileSearch",
  props: {
    fileLists: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      myFileLists: [],
      isExpend: false,
      isHeight: true,
    };
  },
  watch: {
    fileLists: {
      handler(newVal) {
        if (newVal.length) {
          this.myFileLists = clone(newVal, true);
          this.myFileLists.map((item) => {
            item.data.map((item1) => {
              this.$set(item1, "active", false);
            });
          });
          this.$nextTick(() => {
            console.log(this.$refs.contentMain.offsetHeight);
            if (this.$refs.contentMain.offsetHeight < 170) {
              this.isHeight = false;
            }
          });
        }
      },
      immediate: true,
    },
  },
  methods: {
    searchItem(item, itemData) {
      itemData.active = !itemData.active;
      let arr = [];
      this.myFileLists.map((item) => {
        item.data.forEach((item1) => {
          item1.title = item.title;
        });
        arr = arr.concat(item.data);
      });
      const data = arr.filter((item) => item.active);
      console.log(data);
      // this.emit('on-search',data)
    },
    expend() {
      this.isExpend = !this.isExpend;
      const searchMain = this.$refs.searchMain;
      searchMain.style.height = "auto";
      //获取初始的高度
      const heightMain = searchMain.offsetHeight;
      if (this.isExpend) {
        searchMain.style.height = "170px";
      } else {
        searchMain.style.height = `${heightMain}px`;
      }
      requestAnimationFrame(() => {
        if (this.isExpend) {
          searchMain.style.height = `${heightMain}px`;
        } else {
          searchMain.style.height = "170px";
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.isActive {
  background-color: gainsboro;
}
</style>
